<template>
  <div class="test">
    <div class="title">test</div>
    <el-input v-model="test" placeholder="请输入test的值" style="width: 200px;" />
    <div class="count">test的值为：{{ $store.state.todos.test }}</div>
    <el-button @click="handleUpdateTest">commit更改test的值</el-button>
    <el-button @click="handleUpdateTest2">mapMutations更改test的值</el-button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'TestIndex',
  data() {
    return {
      test: "",
    }
  },
  methods: {
    ...mapMutations('todos', ['updateTest']),
    handleUpdateTest(){
      this.$store.commit('todos/updateTest', this.test);
      this.test = '';
    },
    handleUpdateTest2(){
      console.log('mapMutations');
      this.updateTest(this.test);
      this.test = '';
    }
  }
}
</script>

<style lang="less" scoped>
.test{
  width: 100%;
  height: 100%;
  .title{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .count{
    font-size: 16px;
    margin: 20px 0;
  }
}
</style>